<template>
	<div class="tobeDone">
		<tableIndex
			ref="tableIndexRef"
			:tableData="tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:isSelection="true"
			:isRadio="false"
			:fields="fields"
			:height="500"
			:page="page"
			@selectChange="selectChange"
			@searchList="searchList"
			@page-change="pageChange"
		>
			<template #right-btn>
				<div style="float: right">
					<!-- <el-button size="small" plain class="update" @click="addHandler"
            ><svg-icon icon-class="add-icon" />添加</el-button
          > -->
					<el-button
						size="small"
						plain
						class="button_edit"
						@click="onExport(getSearch())"
						><svg-icon icon-class="export" />一键导出</el-button
					>
				</div>
			</template>

			<template #operate>
				<el-table-column label="操作" width="100" align="center" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							class="button_edit"
							@click="lookItemHandler(row)"
							type="primary"
							>查看</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>

		<!-- 添加弹窗 发起会议 -->
		<add-popover ref="addPopoverRef"></add-popover>

		<!-- 查看编辑 会议 -->
		<conference-Popver ref="conferencePopverRef"></conference-Popver>
	</div>
</template>

<script setup>
import TableIndex from "@/components/table/index.vue";
import AddPopover from "@/views/constructionProjectManage/conference/components/AddPopover.vue";
import ConferencePopver from "@/views/constructionProjectManage/conference/components/ConferencePopver.vue";
import { deriveHandelFnc } from "@/hooks/downCommon";

import { organizeAmeeting } from "@/api/project";
import { useRouter } from "vue-router";
import { ref, onMounted, reactive } from "vue";

import { ElButton, ElInput, ElMessageBox, ElMessage } from "element-plus";
const page = reactive({
	page: 1,
	pageSize: 50,
	total: 0,
});
const fields = ref([
	{
		key: "meetingName",
		label: "会议名称",
		type: "input",
		placeholder: "会议名称关键字搜索",
	},

	{
		key: "meetingType",
		label: "会议类型",
		type: "select",
		options: {
			list: [
				{
					label: "立项会议",
					value: "785629734177951051",
				},
				{
					label: "招标会议",
					value: "-6962400106587402897",
				},
				{
					label: "投资会议",
					value: "1635420940115396428",
				},
				{
					label: "用章用印会议",
					value: "5719436876726159658",
				},
			],
		},
	},
	// {
	//   key: 'type',
	//   label: '会议性质',
	//   type: 'select',
	//   options: {
	//     list: [
	//       {
	//         label: '项目会议',
	//         value: '-8533225537650931090'
	//       },
	//       {
	//         label: '任务会议',
	//         value: '7441155005436218877'
	//       }
	//     ]
	//   }
	// }
]);

let tableData = ref([]);
let tableHead = ref([
	{
		prop: "projectSetName",
		label: "所属项目集",
	},
	{
		prop: "projectName",
		label: "所属项目",
	},
	{
		prop: "taskName",
		label: "所属任务",
	},
	{
		prop: "workName",
		label: "工作细项",
	},
	{
		prop: "meetingName",
		label: "议题名称",
	},
	// {
	//   prop: 'type',
	//   label: '会议性质'
	// },
	{
		prop: "meetingType",
		label: "会议类型",
	},
	{
		prop: "meetingTime",
		label: "会议时间",
	},
	{
		prop: "createUserName",
		label: "申请人",
	},
	{
		prop: "createDepartmentName",
		label: "所属部门",
	},
	{
		prop: "createTime",
		label: "创建时间",
	},
]);
let activeName = ref("0");

const selectChange = (e) => {
	console.log(e);
};

//路由跳转
let router = useRouter();

const addPopoverRef = ref(null);
const conferencePopverRef = ref(null);
const addHandler = () => {
	addPopoverRef.value.open();
};
//查看
const lookItemHandler = (row) => {
	console.log("---", row);
	router.push({
		path: `/constructionProjectManage/projectImplementationTask/organizeAMeeting/projectId=${
			row.projectId
		}&projectTaskId=${row.taskId}&itemId=${row.itemId}&isLook=${1}`,
	});
	// conferencePopverRef.value.open()
};
//编辑 建设项目立项  招标 投资 用章用印
const updateHandler = (row) => {
	conferencePopverRef.value.open();
};

//搜索接口请求
const searchList = (e) => {
	// "id": 0,
	// "meetingId": "string",
	// "projectId": "string",
	// "meetingName": "string"
	getPage(e);
};
//分页接口请求
const getPage = (e) => {
	organizeAmeeting
		.getPage({
			pageNum: page.page,
			pageSize: page.pageSize,
			param: getSearch(),
		})
		.then((res) => {
			if (res.code == 200) {
				tableData.value = res.data.content;
				page.total = res.data.totalSize;
			}
		});
};
const tableIndexRef = ref(null);
//获取列表组件搜索数据
const getSearch = () => {
	return tableIndexRef.value.getSearchData();
};
// //一键导出
// const exportHandler = () => {
//   organizeAmeeting
//     .fileExport({
//       param: getSearch() || {}
//     })
//     .then((res) => {
//       const url = window.URL.createObjectURL(new Blob([res]))
//       console.log(url)
//       let link = document.createElement('a')
//       link.style.display = 'none'
//       link.href = url
//       link.setAttribute('download', '会议信息.xlsx')
//       document.body.appendChild(link)
//       link.click()
//       URL.revokeObjectURL(link.href) // 释放URL 对象
//       document.body.removeChild(link)
//       link = null
//     })
// }

const exportConfig = reactive({
	fileName: "会议信息",
	apiPath: "systemExport",
	form: {},
});
const { onExport } = deriveHandelFnc(exportConfig);

//分页
const pageChange = (e) => {
	page.page = e.page;
	page.pageSize = e.limit;

	getPage();
};

onMounted(() => {
	getPage();
});
</script>

<style lang="scss" scoped>
.tobeDone {
	width: 100%;
}
</style>
